<template>
  <view class="chargingOrder">
    <headerTar title="订单" />
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <view class="content">
      <view class="box" v-for="(item, index) in Data" :key="index">
        <view class="top">
          <view>
            <img class="t_img" src="/static/index/car_l.png" alt="" />
            <text class="t_txt">{{ item.deviceName }}</text>
          </view>
          <view class="dian_over">
            {{ item.orderStatus }}
          </view>
        </view>
        <view class="tip">
          {{ item.payType == 0 ? "微信支付" : "钱包支付" }}
        </view>
        <view class="center">
          <view class="c_box">
            <view class="c_txt1">{{ item.payPrice }}元</view>
            <view class="c_txt2">消费金额</view>
          </view>
          <view class="c_box">
            <view class="c_txt1">{{ handleTime(item.realChargeTime) }}</view>
            <view class="c_txt2">实际充电时间</view>
          </view>
          <view class="c_box">
            <view class="c_txt1">{{ item.portNo }}号</view>
            <view class="c_txt2">端口号</view>
          </view>
        </view>
        <view class="time">
          {{ item.startTime }}
        </view>
        <view
          class="c_detail"
          @click="goDetail(item.orderNo, item.orderStatus)"
        >
          查看详情
        </view>
      </view>
      <view class="wrap" v-if="showTips">
        <u-loadmore :status="status" />
      </view>
    </view>
  </view>
</template>

<script>
import { getChargeOrderlistAPi } from "@/api/pay.js";
import headerTar from "@/components/headerTar/header";
export default {
  components: {
    headerTar,
  },
  data() {
    return {
      list: [
        {
          name: "全部",
          count: 0,
        },
        {
          name: "充电中",
          count: 1,
        },
        {
          name: "已结束",
          count: 2,
        },
        {
          name: "未付款",
          count: 3,
        },
      ],
      current: 0,
      status: "loadmore",
      showTips: true, //底部提示
      Data: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        orderStatus: "",
      },
    };
  },
  onLoad(option) {
    option.current
      ? (this.current = parseInt(option.current))
      : (this.current = 0);
    this.getData(this.current);
  },
  onReachBottom() {
    if (this.queryParams.total < 3) return;
    this.status = "loading";
    this.queryParams.pageNum = ++this.queryParams.pageNum;
    if (this.queryParams.total < 10) {
      this.queryParams.total < 4
        ? (this.showTips = false)
        : (this.status = "nomore");
      return;
    }
    this.getData(this.current);
  },
  methods: {
    change(val) {
      this.Data = "";
      this.queryParams.pageNum = 1;
      this.current = val.index - 0;
      this.showTips = true;
      this.getData(this.current);
    },
    goDetail(orderNo, orderStatus) {
      let url = "";
      orderStatus == "充电中"
        ? (url = "/pages/charging/charging")
        : (url = "/pages/orderDetail/orderDetail?orderNo=" + orderNo);
      uni.navigateTo({
        url,
      });
    },
    handleTime(val) {
      let times = (val / 60).toFixed(2).split(".");
      return times[0] + "小时" + times[1] + "分钟";
    },
    getData(val) {
      switch (val) {
        case 0:
          this.queryParams.orderStatus = "ALL";
          break;
        case 1:
          this.queryParams.orderStatus = "CHARGING";
          break;
        case 2:
          this.queryParams.orderStatus = "CLOSED";
          break;
        case 3:
          this.queryParams.orderStatus = "NOPAY";
          break;
      }
      getChargeOrderlistAPi({
        orderStatus: this.queryParams.orderStatus,
        pageNum: this.queryParams.pageNum,
        // orderStatus: this.queryParams.orderStatus,
      }).then((v) => {
        this.Data = [...this.Data, ...v.rows];
        this.queryParams.total = v.total;
        console.log(this.Data);
        if (this.queryParams.pageSize >= v.total) {
          console.log(v.total);
          v.total < 4 ? (this.showTips = false) : (this.status = "nomore");
          console.log(this.status);
        } else {
          this.status = "loadmore";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chargingOrder {
  .content {
    background-color: #f5f7fa;
    overflow: hidden;
    position: relative;

    .wrap {
      padding: 14rpx;
    }

    .item {
      padding: 14rpx 0;
      color: $u-content-color;
      font-size: 28rpx;
    }

    .box {
      position: relative;
      margin: 35rpx 15rpx;
      padding: 15rpx;
      height: 290rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      background-color: #fff;
      overflow: hidden;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .t_img {
          margin-right: 8rpx;
          width: 35rpx;
          height: 35rpx;
        }

        .t_txt {
          font-size: 34rpx;
          font-weight: bold;
        }

        .dian_over {
          margin-top: 10rpx;
          margin-right: 5rpx;
          padding: 5rpx 10rpx;
          font-size: 26rpx;
          border-radius: 20rpx;
          border: 1px solid #4cc877;
          color: #4cc877;
        }
      }

      .tip {
        display: inline-block;
        margin: 10rpx 0;
        border-radius: 8rpx;
        font-size: 20rpx;
        color: #4cc877;
        border: 2rpx solid #4cc877;
        padding: 3rpx 6rpx;
      }

      .center {
        display: flex;
        padding: 15rpx;
        border-radius: 10rpx;
        background-color: #f5f7fa;
        justify-content: space-around;

        .c_box {
          flex: 1;
          display: flex;
          flex-direction: column;
          text-align: center;

          .c_txt1 {
            font-size: 28rpx;
            font-weight: bold;
          }

          .c_txt2 {
            margin-top: 5rpx;
            font-size: 22rpx;
            color: #c3c3cc;
          }
        }
      }

      .time {
        margin-top: 20rpx;
        color: #838687;
        font-size: 26rpx;
      }

      .c_detail {
        position: absolute;
        bottom: 12rpx;
        right: 10rpx;
        font-size: 20rpx;
        border-radius: 8rpx;
        border: 2rpx solid #c3c3cc;
        padding: 5rpx 12rpx;
      }
    }
  }
}
</style>
